<template>
    <div class="customize-artboard-wrap m-b bt-line" v-if="!mixinState.mSelectMode">
        <h3 class="no-select m-b bold">画板属性</h3>
        <div class="artboard-item flex">
            <h3 class="no-select">尺寸</h3>
            <n-select v-model:value="sizeValue" :options="options" @update:value="handleUpdateValue" />
        </div>
        <div class="artboard-item">
            <h3 class="no-select">颜色</h3>
            <ul class="color-group__wrap">
                <li 
                    class="color-item cursor" 
                    v-for="(item, index) in bgColors" 
                    :key="index" 
                    :style="{background: item }"
                    @click="handleBgColor(item)">
                </li>
            </ul>
            <input 
                class="color-input__picker cursor" 
                v-model="currentColor" 
                type="color" 
                list=""
                @input="onInputColor"
                />
        </div>
    </div>
</template>

<script setup name="ArtboardAttribute">
import { useArtboardStore } from '@/stores/artboard'
import { config } from "../config/editor"
import useSharedCore from '@/hooks/shared'

const { coverEditor, mixinState } = useSharedCore();
const store = useArtboardStore()
const { artbordSize } = config
const width = ref(artbordSize.width)
const height = ref(artbordSize.height)
const sizeValue = ref(`${artbordSize.width}x${artbordSize.height}`)
const currentColor = ref('#5F2B63')

const options = ref([
    {
        label: '小红书配图 1242x1660 px',
        width: 1242,
        height: 1660,
        value: '1242x1660'
    },
    {
        label: '公众号首图 900x383 px',
        width: 900,
        height: 383,
        value: '900x383'
    },
    {
        label: '公众号次图 500x500 px',
        width: 500,
        height: 500,
        value: '500x500'
    },
    {
        label: '竖版视频封面 1242x2208 px',
        width: 1242,
        height: 2208,
        value: '1242x2208'
    },
    {
        label: '横板视频封面 1920x1080 px',
        width: 1920,
        height: 1080,
        value: '1920x1080'
    }
])

const bgColors = ref([
    '#5F2B63',
    '#B23554',
    '#00224D',
    '#102C57',
    '#153448',
    '#002379',
    '#006769',
    '#240750',
    '#01204E',
    '#3AA6B9',
    '#26355D',
    '#050C9C',
    '#005C78',
    '#1A2130',
    '#F27E56',
    '#FCE766',
    '#86DCCD',
    '#E7FDCB',
    '#FFDC84',
    '#F57677',
    '#5FC2C7',
    '#98DFE5',
    '#C2EFF3',
    '#DDFDFD',
    '#9EE9D3',
    '#2FC6C8',
    '#2D7A9D',
    '#48466d',
    '#61c0bf',
    '#bbded6',
    '#fae3d9',
    '#ffb6b9',
    '#ffaaa5',
    '#ffd3b6',
    '#dcedc1',
    '#a8e6cf',
])

const handleUpdateValue = (value) => {
    sizeValue.value = value
    const findItem = options.value.find(el => el.value === value)
    if (!findItem) return
    width.value = findItem.width
    height.value = findItem.height
    setSize()
}

const setSize = () => {
    coverEditor.setSize(width.value, height.value)
}

const onInputColor = evt => {
    const { value } = evt.target
    currentColor.value = value
    handleBgColor(value)
}

const handleBgColor = color => {
    const workspace = coverEditor?.canvas?.getObjects().find((item) => item.id === "workspace");
    if (workspace) {
        currentColor.value = color
        workspace.set('fill',color)
        coverEditor.canvas.renderAll()
    }
}

const onSizeChange = (w, h) => {
    width.value = w
    height.value = h
}

const onLoadJSON = () => {
    const workspace = coverEditor?.canvas?.getObjects().find((item) => item.id === "workspace");
    if (workspace) {
        currentColor.value = workspace.get('fill') || '#5F2B63'
    }
}

nextTick(() => {
    coverEditor.setSize(width.value, height.value)
    coverEditor.on('sizeChange', onSizeChange)
    coverEditor.on('loadJSON', onLoadJSON)
})

onBeforeUnmount(() => {
    coverEditor.off('loadJSON', onLoadJSON)
})

</script>

<style lang="scss" scoped>
input[type="color"] {
    width: 100%;
    // border: none;
    // background: none;
    // -webkit-appearance: none;
    // appearance: none;
    border-width: 0px;
    // border-style: none;
    outline: none;
    border-radius: 3px;
    margin-top: 10px;
}
.customize-artboard-wrap {
    padding-bottom: 12px;
    .flex {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .artboard-item {
        h3 {
            flex: 0 0 35px;
        }
        .color-group__wrap {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            .color-item {
                width: 30px;
                aspect-ratio: 1 / 1;
                border-radius: 50%;
                margin: 3px;
            }
        }
    }
}
</style>